<template>
  <div>
    <Card>
      <p slot="title">
        虚拟列表
      </p>
      <div slot="extra">
        <Button class="icon-btn" type="success" @click="alertAdd">
          <span class="ml4">添加</span>
        </Button>
      </div>
      <Table ref="tables" :data="tableData" :columns="columns" @on-selection-change="select" border disabled-hover/>
      <div class="page-warp">
        <Button type="primary" @click="batchDelete">批量删除</Button>
        <Page
            :current="page.current"
            :page-size="page.size"
            :total="page.total"
            show-total
            @on-change="pageChange"></Page>
      </div>
    </Card>
    <Modal v-model="modalSetting.show" width="668" :styles="{top: '20%'}" @on-visible-change="doCancel">
      <p slot="header" style="color:#2d8cf0;">
        <Icon type="md-information-circle"></Icon>
        <span>{{formItem.id ? '编辑' : '新增'}}用户</span>
      </p>
      <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
        <FormItem label="头像" prop="headimgurl">
          <Row>
            <Col span="12">
              <div class="demo-upload-list">
                <img :src="formItem.headimgurl">
              </div>

              <div class="upload-btn" @click="imageModal.isShow = !imageModal.isShow">
                <Icon type="ios-camera" size="20"></Icon>
              </div>

            </Col>
          </Row>
        </FormItem>
        <FormItem label="昵称" prop="nickname">
          <Input v-model="formItem.nickname" placeholder="请输入昵称"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
        <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal>
    <ImageModal v-model="imageModal.isShow" @get-selection="imageSelect" :limit="1"></ImageModal>
  </div>
</template>

<script>
import { lotteryVirtual, virtualSave, virtualDel, virtualStatus } from '@/api/lottery'
import Icons from '_c/icons'
import ImageModal from '@/components/img-modal'
import base64 from '@/assets/images/base64'

export default {
  name: 'lottery_virtual',
  components: {
    Icons,
    ImageModal
  },
  data () {
    return {
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      imageModal: {
        isShow: false
      },
      headimgurl: base64.default_logo,
      columns: [
        { type: 'selection', width: 65, align: 'center' },
        {
          title: '头像',
          width: 100,
          key: 'headimgurl',
          align: 'center',
          render: (h, params) => {
            let src = params.row.headimgurl || base64.default_logo
            return h('div', {
              attrs: {
                style: 'width: 40px;height: 40px; margin:auto;'
              }
            }, [
              h('img', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                attrs: {
                  src: src,
                  style: 'width: 40px;height: 40px;border-radius: 2px;'
                },
                style: {
                }
              })
            ])
          }
        },
        { title: '昵称', key: 'nickname' },
        {
          title: '状态',
          key: 'hide',
          width: 100,
          align: 'center',
          render: (h, params) => {
            let _this = this
            let { id, status } = params.row
            return h('i-switch', {
              attrs: {
                size: 'large'
              },
              props: {
                'true-value': 1,
                'false-value': 0,
                value: status
              },
              on: {
                'on-change': (status) => {
                  virtualStatus({ status, id }).then(res => {
                    if (res.code === 1) {
                      _this.$Message.success(res.msg)
                    } else {
                      _this.$Message.error(res.msg)
                    }
                  })
                }
              }
            }, [
              h('span', {
                slot: 'open'
              }, '启用'),
              h('span', {
                slot: 'close'
              }, '禁用')
            ])
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            let _this = this
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    let { id, headimgurl, nickname } = params.row
                    _this.formItem.id = id
                    _this.formItem.nickname = nickname
                    _this.formItem.headimgurl = headimgurl
                    _this.modalSetting.show = true
                    _this.modalSetting.index = params.index
                  }
                }
              }, '编辑'),
              h('Poptip', {
                style: {
                  'textAlign': 'left'
                },
                props: {
                  confirm: true,
                  title: '确定删除？'
                },
                on: {
                  'on-ok': () => {
                    let { id } = params.row
                    virtualDel({ id }).then(res => {
                      if (res.code === 1) {
                        this.$Message.success(res.msg)
                        this.remove(params.index)
                      }
                    })
                  }
                }
              }, [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  }
                }, '删除')
              ])
            ])
          }
        }
      ],
      selection: [],
      tableData: [],
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      formItem: {
        headimgurl: base64.default_logo,
        nickname: '',
        id: 0
      },
      ruleValidate: {
        headimgurl: [
          { required: true, message: '头像不能为空', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '用户昵称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    headimgurl (val) {
      this.formItem.headimgurl = val
    }
  },
  methods: {
    imageSelect (imageSelection) {
      this.headimgurl = imageSelection[0].thumb
    },
    cancel () {
      this.modalSetting.show = false
    },
    doCancel (data) {
      if (!data) {
        this.formItem.id = 0
        this.formItem.nickname = ''
        this.formItem.headimgurl = base64.default_logo
        this.headimgurl = base64.default_logo
        this.modalSetting.loading = false
        this.modalSetting.index = 0
      }
    },
    alertAdd () {
      this.modalSetting.show = true
    },
    submit () {
      let _this = this
      this.$refs['myForm'].validate((valid) => {
        if (valid) {
          _this.modalSetting.loading = true
          virtualSave(this.formItem).then(function (res) {
            if (res.code === 1) {
              _this.$Message.success(res.msg)
              _this.getList()
            } else {
              _this.$Message.error(res.msg)
            }
            _this.cancel()
          })
        }
      })
    },
    select (selection) {
      this.selection = selection
    },
    batchDelete () {
      let _this = this
      let ids = this.selection.map(selection => {
        return selection.id
      })
      if (!ids.length) {
        _this.$Message.error('请选择要删除的抽奖')
        return
      }
      _this.$Modal.confirm({
        title: '删除抽奖',
        content: '确定要删除所选抽奖?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          virtualDel({ id: ids }).then(res => {
            if (res.code === 1) {
              this.$Message.success(res.msg)
              this.getList()
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
      })
    },
    remove (index) {
      this.tableData.splice(index, 1)
      if (index === 0 && (this.page.current > 1)) {
        this.page.current = this.page.current - 1
        this.getList()
      } else {
        this.page.total = this.page.total - 1
      }
    },
    pageChange (page) {
      this.page.current = page
      this.getList()
    },
    getList () {
      let { current: page, size } = this.page
      lotteryVirtual({ page, size }).then(res => {
        if (res.code === 1) {
          this.tableData = res.data.list
          this.page.total = res.data.count
        }
      })
    }
  },
  activated () {
    this.getList()
  },
  created () {
    this.getList()
  }
}
</script>

<style>
.ivu-card-head p{
  height: 32px;
  line-height: 32px;
}
.demo-upload-list{
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
  margin-right: 4px;
}
.demo-upload-list img{
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover{
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
  display: block;
}
.demo-upload-list-cover i{
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.upload-btn {
  background: #fff;
  border: 1px dashed #dddee1;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease;
  width: 58px;
  height:58px;
  line-height: 58px;
  display: inline-block;
}
</style>
